<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7"><![endif]-->
<!--[if IE 8]>
<html class="ie ie8"><![endif]-->
<!--[if IE 9]>
<html class="ie ie9"><![endif]-->
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:v-bind="http://www.w3.org/1999/xhtml" lang="ch">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="author" content="Nghia Minh Luong">
<meta name="keywords" content="Default Description">
<meta name="description" content="Default keyword">
<title>校园互助</title>
<!-- Fonts-->
<link rel="stylesheet" th:href="@{/static/css/fontsgoogleapis.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/font-awesome/css/font-awesome.min.css}">
<link rel="stylesheet" th:href="@{/static/plugins/ps-icon/style.css}">
<!-- CSS Library-->
<link rel="stylesheet"
	th:href="@{/static/plugins/bootstrap/dist/css/bootstrap.min.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/owl-carousel/assets/owl.carousel.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/slick/slick/slick.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/bootstrap-select/dist/css/bootstrap-select.min.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/Magnific-Popup/dist/magnific-popup.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/jquery-ui/jquery-ui.min.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/revolution/css/settings.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/revolution/css/layers.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/revolution/css/navigation.css}">
<link rel="stylesheet"
	th:href="@{/static/plugins/revolution/css/list.css}">

<!-- Custom-->

<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}"
	media="all">
<link rel="stylesheet" th:href="@{/static/css/style.css}">
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript"
	th:src="@{/static/plugins/jquery/dist/jquery.min.js}"></script>
<!--HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries-->
<!--WARNING: Respond.js doesn't work if you view the page via file://-->
<!--[if lt IE 9]>
    <script th:src="@{/static/js/html5shiv.js}"></script>
    <script th:src="@{/static/js/respond.min.js}"></script>
    <![endif]-->
<script th:inline="javascript">
        var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
    </script>
</head>
<!--[if IE 7]>
<body class="ie7 lt-ie8 lt-ie9 lt-ie10"><![endif]-->
<!--[if IE 8]>
<body class="ie8 lt-ie9 lt-ie10"><![endif]-->
<!--[if IE 9]>
<body class="ie9 lt-ie10"><![endif]-->
<body class="ps-loading">
	<div class="header--sidebar"></div>
	<header class="header">
		<div th:include="~{index :: myheader}"></div>
	</header>
	<div class="header-services">
		<div th:include="~{index :: myhdservices}"></div>
	</div>
	<main class="ps-main" id="newslist">
	<div class="ps-section ps-home-blog">
		<div class="ps-container">
			<div class="ps-section__header">
				<h2 class="ps-section__title" data-mask="Notice">校园互助</h2>
			</div>

			<!--添加选择互助的类型-->
			<div class="ps-product-action">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<label class="layui-form-label"
							style="font-size: 25px; color: #626262"><b>类型</b></label>
						<div class="layui-input-inline" >
							<select name="cname" lay-filter="setareas">
								<option th:title="默认" >默认</option>
								<option th:title="有偿" >有偿</option>
								<option th:title="免费" >免费</option>
							</select>							 
						</div>
						<label class="layui-form-label"
							style="font-size: 25px; color: #626262"><b>价格</b></label>
						<div class="layui-input-inline">
							<select name="cname" lay-filter="setprices">
								<option th:title="0">默认</option>
								<option th:title="1">价格 (从低到高)</option>
								<option th:title="2">价格 (从高到低)</option>
							</select>
						</div>
					</div>
				</form>
			</div>



			<!-- 上方内容 -->
			 <div class="box">
				<div class="head">
					<span>最新</span>
				</div>

				<div class="container"  v-for="helps in help">
					<img src="/static/images/1.jpg" alt="公告" width="50px"
						height="50px">
					  <div  class="topleft" >
	                         <h3>{{helps.help_topic}}</h3>
	                         <h4>￥:{{helps.help_price}}</h2>
			                 <p>帮助描述:{{helps.help_info}}</p>
			                  <a href="/html/help-detail">开始进入</a>
	                   </div>	
				</div>
			</div>
		</div>
	</div>

	<!-- 翻页 -->
	<div id="layuipage" style="margin-right: 20px">
		<div class="layui-box layui-laypage layui-laypage-default"
			id="layui-laypage-1">
			<span class="layui-laypage-count">共 19 条</span> <a
				href="javascript:;" class="layui-laypage-prev layui-disabled"
				data-page="0">上一页</a> <span class="layui-laypage-curr"><em
				class="layui-laypage-em"></em><em>1</em></span><a href="javascript:;"
				data-page="2">2</a><a href="javascript:;" class="layui-laypage-next"
				data-page="2">下一页</a>
		</div>
	</div>

	<div class="ps-footer bg--cover" style="margin-top: 20px"
		data-background="images/background/parallax.jpg">
		<div class="ps-footer__content">
			<div class="ps-container">
				<div class="row">
					<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 ">
						<aside class="ps-widget--footer ps-widget--info">
							<header>
								<a class="ps-logo" th:href="@{/}"><img
									th:src="@{/static/images/logo-white.png}" alt=""></a>
								<h3 class="ps-widget__title">Address Office 1</h3>
							</header>
							<footer>
								<p>
									<strong>460 West 34th Street, 15th floor, New York</strong>
								</p>
								<p>
									Email: <a href='mailto:support@store.com'>support@store.com</a>
								</p>
								<p>Phone: +323 32434 5334</p>
								<p>Fax: ++323 32434 5333</p>
							</footer>
						</aside>
					</div>
					<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 ">
						<aside class="ps-widget--footer ps-widget--info second">
							<header>
								<h3 class="ps-widget__title">Address Office 2</h3>
							</header>
							<footer>
								<p>
									<strong>PO Box 16122 Collins Victoria 3000 Australia</strong>
								</p>
								<p>
									Email: <a href='mailto:support@store.com'>support@store.com</a>
								</p>
								<p>Phone: +323 32434 5334</p>
								<p>Fax: ++323 32434 5333</p>
							</footer>
						</aside>
					</div>
					<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 ">
						<aside class="ps-widget--footer ps-widget--link">
							<header>
								<h3 class="ps-widget__title">Find Our store</h3>
							</header>
							<footer>
								<ul class="ps-list--link">
									<li><a href="#">Coupon Code</a></li>
									<li><a href="#">SignUp For Email</a></li>
									<li><a href="#">Site Feedback</a></li>
									<li><a href="#">Careers</a></li>
								</ul>
							</footer>
						</aside>
					</div>
					<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 ">
						<aside class="ps-widget--footer ps-widget--link">
							<header>
								<h3 class="ps-widget__title">Get Help</h3>
							</header>
							<footer>
								<ul class="ps-list--line">
									<li><a href="#">Order Status</a></li>
									<li><a href="#">Shipping and Delivery</a></li>
									<li><a href="#">Returns</a></li>
									<li><a href="#">Payment Options</a></li>
									<li><a href="#">Contact Us</a></li>
								</ul>
							</footer>
						</aside>
					</div>
					<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 ">
						<aside class="ps-widget--footer ps-widget--link">
							<header>
								<h3 class="ps-widget__title">Products</h3>
							</header>
							<footer>
								<ul class="ps-list--line">
									<li><a href="#">Shoes</a></li>
									<li><a href="#">Clothing</a></li>
									<li><a href="#">Accessries</a></li>
									<li><a href="#">Football Boots</a></li>
								</ul>
							</footer>
						</aside>
					</div>
				</div>
			</div>
		</div>
	</div>
	</main>
		<!-- JS Library-->
	<script type="text/javascript"
		th:src="@{/static/plugins/bootstrap/dist/js/bootstrap.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/jquery-bar-rating/dist/jquery.barrating.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/owl-carousel/owl.carousel.min.js}"></script>
	<script type="text/javascript" th:src="@{/static/plugins/gmap3.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/imagesloaded.pkgd.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/isotope.pkgd.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/bootstrap-select/dist/js/bootstrap-select.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/jquery.matchHeight-min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/slick/slick/slick.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/elevatezoom/jquery.elevatezoom.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/Magnific-Popup/dist/jquery.magnific-popup.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/jquery-ui/jquery-ui.min.js}"></script>
	<script type="text/javascript" th:src="@{/static/js/ditugoogle.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/jquery.themepunch.tools.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/jquery.themepunch.revolution.min.js}"></script>
	<script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.video.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.slideanims.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.layeranimation.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.navigation.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.parallax.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.actions.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.kenburn.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.migration.min.js}"></script>
	<!-- Custom scripts-->
	<script type="text/javascript" th:src="@{/static/js/main.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/js/common/listnews.js}"></script>
	
</body>
</html>
